<template>
	<div class="main">
		<!-- <scroller> -->

		<div class="adOuterWrap">
			<div class="back">
				<go-back aa='../chooseCourse/advanCourse'></go-back>
				<h2>选择测试排序结果记录<b style="float: right;font-size: 0.22rem;color: #6CBF20;" v-show="flag==false" @click="commonJs.gosto('advantageTest')">新的测试</b></h2>

			</div>
			<div class="adWrap">
				<scroller style="top: 1.6rem;">
					<div>
						<div class="adBoxs">
							<div class="listBox">
								<span v-show="flag" class="txtBox" @click="commonJs.gosto('advantageTest')">
									<i>您尚未完成优势科目测评</i>
									<b>点击开始</b>
								</span>
								<!-- <div :class="['recordList',tabIndex==index?'ractive':'']"> -->
								<div :class="['recordList',tabIndex==index?'ractive':'']" v-for="(item,index) in aros" :key='index' @click="tabs(index,item.ranking)">
									<div class="record1 flex-h" style="margin-bottom: 0.15rem;">
										<span class="sp1 flex1">
											<img style="width: 0.4rem;height: 0.4rem;margin-top: 0.05rem;" class="imgIcon" alt="" :src="tabIndex==index?img2:img1">
										</span>
										<span class="sp2">第{{lens-index}}次生成</span>
									</div>
									<div class="record1  flex-h">
										<span class="sp1 flex1">综合测试结果</span>
										<span class="sp3">
											<img src="~/static/iconsvgs/rightsy.png" alt="">

										</span>
									</div>
									<div class="record2 flex-h" @click.stop="">
										<span class="sp1 flex1">生成时间</span>
										<span class="sp2">{{(new Date(item.createTime)).format('yyyy-MM-dd hh:mm')}}</span>
									</div>
									<div>
										<div class="record3">
											<span>专业排序结果</span>
										</div>
										<div class="record4 flex-h">
											<span class="sps flex1" v-for="(its,$index) in item.ranking" :key='$index+100'>
												<b class="b1">NO.{{$index+1}}</b>
												<b class="b2">{{its}}</b>
											</span>


										</div>
									</div>

								</div>
							</div>

						</div>
						<div style="width: 100%;height: 2.8rem;"></div>
					</div>

				</scroller>
				<!-- </div> -->
			</div>
			<div class="botFixed">
				<span @click="clicks()">使用此结果排序</span>
			</div>
		</div>
		<!-- </scroller> -->
	</div>
</template>
<script>
	import ls from 'store2';
	import {
		format
	} from '~/plugins/filter';
	import goBack from '~/components/goBack'
	// import reportList from '~/components/reportList1'
	import axios1 from '~/plugins/axios1'
	export default {
		head: {
			title: '选课选科'
		},
		components: {
			goBack
			// reportList
		},
		data() {
			return {
				tabIndex: 0,
				img1: require('~/static/images/search_icon_nor.png'),
				img2: require('~/static/images/search_icon_sure.png'),
				craData: [],
				flag: false,
				types: '',
				aros: [],
				rest: [],
				lens:1
			}
		},
		created() {
			this.commonJs.gologins();
		},

		mounted: function() {
			this.getReport();
			if (this.commonJs.isTerminal() == 'isAndroid') {
				if (window.history && window.history.pushState) {
					history.pushState(null, null, document.URL);
					window.addEventListener('popstate', this.fun, false); //false阻止默认事件 
				}
			}

		},
		destroyed() {
			// this.commonJs.xahui('../chooseCourse/advanCourse')
			window.removeEventListener('popstate', this.fun, false);
		},
		destroyed() {},
		watch: {

		},

		methods: {
			fun() {
				this.$router.replace({
					path: '../chooseCourse/advanCourse'

				})

			},
			tabs(index, items) {
				this.tabIndex = index
				this.rest = items
				console.log('items', items)
			},
			getReport() {
				axios1.posts('/curricula/getReport?userType=' + ls.get('userType')).then(res => {
					if (res.code === '0') {
						if (res.data.length === 0) {
							this.flag = true

						} else {
							let $index = null;
							this.aros = res.data																	
							this.aros.forEach((item,index) => {
								if (typeof(item.ranking) == 'string') {	
									try {
										let obj=JSON.parse(item.ranking);
										if(typeof(obj)== 'object' && obj ){
											let sorted_keys_array = Object.keys(obj).sort((a, b) => {
												return obj[b].num - obj[a].num;
											});
											item.ranking = sorted_keys_array
											return true;
										}else{
											return false;
										}
								
									} catch(e) {
										console.log('error第：'+index+'条有问题'+item.ranking+'!!!'+e);	
										$index = index
										
									
										return false;/*  */
									}
								}																																							
							})
							if($index>0 || $index==0){
								this.aros.splice($index,$index+1)
							}							
							this.rest = this.aros[0].ranking
							this.lens=res.data.length;


						}
					}
				}).catch((error) => {
					console.log(error)
					this.$vux.toast.text(error);
				})
			},
			abc(data) {
				this.tabix = data
				console.log('data', data)
			},
			clicks() {
				ls.set('jgpx', this.rest)
				this.commonJs.gosto('advanCourse')
			},


			goto(routerName, queryData) {
				this.$router.replace({
					path: routerName,
					query: {
						type: queryData
					}
				})
			}

		},
		beforeDestroy() {

		}

	}
</script>

<style scoped lang="less">
	.recordList {
		margin-top: 0.3rem;
		width: 100%;
		// height:3.76rem;
		height: auto;
		box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
		border-radius: 0.1rem;
		border: 0.02rem solid rgba(238, 238, 238, 1);
		padding: 0.2rem 0.3rem;
		box-sizing: border-box;

		.record1 {
			height: 0.5rem;
			line-height: 0.5rem;

			.sp1 {
				font-size: 0.3rem;
				font-weight: bold;
				color: rgba(34, 34, 34, 1);
			}

			.sp2 {
				width: 1.9rem;
				height: 0.5rem;
				background: rgba(250, 250, 250, 1);
				border-radius: 0.25rem;
				font-size: 0.24rem;
				font-weight: bold;
				color: rgba(187, 187, 187, 1);
				line-height: 0.5rem;
				text-align: center;
			}

			.sp3 {
				width: 0.3rem;

				img {
					width: 0.2rem;
					height: auto;
				}
			}
		}

		.record2 {
			height: 0.5rem;
			line-height: 0.5rem;
			margin-top: 0.3rem;

			.sp2 {
				flex: 2
			}

			.sp1,
			.sp2 {
				font-size: 0.26rem;
				// font-family:PingFang-SC-Medium;
				font-weight: 500;
				color: rgba(153, 153, 153, 1);
				// line-height:37px;
			}

		}

		.record3 {
			margin-top: 0.3rem;
			padding: 0.18rem 0;
			height: auto;
			border-top: 0.02rem solid rgba(238, 238, 238, 1);

			span {
				font-size: 0.24rem;
				font-weight: bold;
				color: rgba(187, 187, 187, 1);

			}

		}

		.record4 {
			width: 100%;
			height: auto;

			.sps {

				// width: 1.96rem;
				height: 0.8rem;
				background: rgba(250, 250, 250, 1);
				border-radius: 0.1rem;
				filter: blur(0px);


				font-weight: bold;
				color: rgba(34, 34, 34, 1);
				line-height: 0.8rem;
				margin-right: 0.2rem;
				text-align: center;

				b {
					display: block;
					height: 0.4rem;
					text-align: center;
					line-height: 0.4rem;
					font-size: 0.22rem;
				}

				.b1 {
					color: rgba(187, 187, 187, 1)
				}

				.b2 {
					color: rgba(102, 102, 102, 1)
				}
			}

			.sps:nth-of-type(1),
			.sps:nth-of-type(2),
			.sps:nth-of-type(3) {
				.b1 {
					color: rgba(108, 191, 32, 1)
				}

				.b2 {
					color: rgba(34, 34, 34, 1)
				}
			}

			.sp3 {
				margin-right: 0;
			}
		}
	}

	.ractive {
		border: 0.02rem solid rgba(108, 191, 32, 1);
		box-shadow: 0px 0px 20px 0px rgba(204, 204, 204, 0.3);
	}

	.adOuterWrap {
		width: 7.5rem;
		height: 100vh;
		background: #fff;
		flex-direction: column;
		overflow: hidden;

		.adWrap {

			padding: 0 0.3rem;
			width: 7.5rem;
			box-sizing: border-box;

			.adBoxs {
				width: 100%;
				height: auto;

				.listBox {
					height: auto;
					padding: 0.3rem 0.3rem;
					box-sizing: border-box;

					.txtBox {
						display: block;
						width: 100%;
						height: 0.8rem;
						background: rgba(255, 241, 184, 1);
						border-radius: 0.1rem;
						opacity: 0.6;
						text-align: center;
						line-height: 0.8rem;

						i,
						b {
							font-size: 0.22rem;

							font-weight: bold;
							color: rgba(34, 34, 34, 1);

						}

						b {
							margin-left: 0.1rem;
							color: #6CBF20;
						}
					}

				}


			}
		}


	}

	.back {
		width: 100%;
		height: auto;

		h2 {
			padding: 0 0.3rem;
			box-sizing: border-box;
			display: block;
			height: 0.8rem;
			font-size: 0.44rem;

			font-weight: bold;
			color: rgba(34, 34, 34, 1);
			line-height: 0.8rem;
		}
	}

	.botFixed {
		position: fixed;
		height: 1.2rem;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px -4px 10px 0px rgba(204, 204, 204, 0.2);
		left: 0;
		bottom: 0;
		width: 7.5rem;
		overflow: hidden;

		span {
			width: 3.8rem;
			height: 0.7rem;
			background: rgba(108, 191, 32, 1);
			border-radius: 0.35rem;

			font-size: 0.3rem;

			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			display: block;
			line-height: 0.7rem;
			margin: 0.25rem auto;
		}
	}
</style>
